<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>导航</title>
    <link rel="stylesheet" href="./main.css" />
  </head>
  <body>
    <main>
      <div class="wrapper" id="kbWrapper"></div>
    </main>
    <script>
      // 初始化数据
      var hashA = init();
      var keys = hashA["keys"];
      var names = hashA["names"];
      var hash = hashA["hash"];

      // 生成键盘
      generateKeyboard(keys, hash);

      // 监听用户动作
      listenToUser(hash);

      // 下面是工具函数
      // 初始化数据
      function init() {
        var keys = {
          0: ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"],
          1: ["a", "s", "d", "f", "g", "h", "j", "k", "l"],
          2: ["z", "x", "c", "v", "b", "n", "m"],
          length: 3
        };
        var names = {
          0: ["Json格式化", "时间戳在线", "base64在线", "网易云音乐", "安检管理后台", "y", "u", "i", "o", "p"],
          1: ["a", "s", "d", "f", "g", "h", "j", "k", "l"],
          2: ["z", "x", "c", "v", "b", "n", "m"],
          length: 3
        };
        var hash = {
          q: "http://www.json.cn",
          w: "http://tool.lu/timestamp",
          e: "http://tool.chinaz.com/tools/imgtobase/",
          r: "https://music.163.com",
          t: "http://internal.visight.cn:13080/manage/",
          y: "youtube.com",
          u: "uc.com",
          i: "iqiyi.com",
          o: "opera.com",
          p: "paofu.cloud",
          a: "acfun.tv",
          s: "sohu.com",
          z: "zhihu.com"
        };
        var hashInLocalStorage = getFromLocalStorage("zzz");
        if (hashInLocalStorage) {
          hash = hashInLocalStorage;
        }
        return {
          keys: keys,
          names: names,
          hash: hash
        };
      }

      // 生成键盘
      function generateKeyboard(keys, hash) {
        for (var i = 0; i < keys.length; i++) {
          var divx = cTag("div");

          kbWrapper.appendChild(divx);

          var row = keys[i];
          var name = names[i];
          for (var n = 0; n < row.length; n++) {
            var span = createSpan(row[n]);
            var p = createP(name[n]);

            var kbd = createKbd("kbd",row[n]);
            kbd.className = "key";
            p.id = row[n];
            kbd.appendChild(span);
            kbd.appendChild(p);
            divx.appendChild(kbd);
          }
        }
      }

      // 监听用户动作
      function listenToUser(hash) {
        document.onkeypress = function(oKey) {
          key = oKey.key;
          website = hash[key];
          window.open(website, "blank");
        };
      }

      // 获取localStorage中name对应的hash
      function getFromLocalStorage(name) {
        return JSON.parse(localStorage.getItem(name) || "null");
      }

      // 创建标签
      function cTag(tagName) {
        return document.createElement(tagName);
      }

      // 创建span标签
      function createSpan(textContent) {
        var span = cTag("span");
        span.textContent = textContent;
        span.className = "text";
        return span;
      }
      // 创建P标签
      function createP(textContent) {
        var p = cTag("p");
        p.innerHTML =textContent;
        p.className = "p-text";
        p.onclick = function(re) {
          console.log(re);
          var button2 = re.target;
          var key = button2.id;
          var img2 = button2.previousSibling;
          var website = hash[key];
          window.open(website, "blank");
        };
        return p;
      }
       // 创建kbd标签
       function createKbd(tagName) {
        var kbd = cTag(tagName);
        // kbd.onclick = function(re) {
        //   console.log(re)
        //   console.log(re.target.localName)
        //   console.log(re.target)
        //   var button2 = re.target;
        //   var key = re.id;
        //   alert(key)
        //   var img2 = button2.previousSibling;
        //   var website = hash[key];
        //   window.open(website, "blank");
        // };
        return kbd;
      }

  

      // 创建img标签
      function createImg(domain) {
        var img = cTag("img");
        if (domain) {
          img.src = "https://" + domain + "/favicon.ico";
        } else {
          img.src = "ico.png";
        }
        img.onerror = function(dd) {
          dd.target.src = "ico.png";
        };
        return img;
      }
    </script>
  </body>
</html>
